<html>
<head>
	<title></title>
</head>
<body>
	<input id='msg'><button id='send'>Send</button>
	<div id='output'></div>
	<script type="text/javascript">
		(function () {
			var ws = new WebSocket('ws://localhost:8080'),
				output = document.getElementById('output'),
				send = document.getElementById('send');

			function logStr(eventStr, msg) {
				return '<div>' + eventStr + ': ' + msg + '</div>';
			}

			send.addEventListener('click', function () {
				var msg = document.getElementById('msg').value;
				ws.send(msg);		//send to server
				output.innerHTML += logStr('Sent', msg);
			});

			ws.onmessage = function (e) {
				output.innerHTML += logStr('Recieved', e.data);
			};

			ws.onerror = function (e) {
				output.innerHTML += logStr('Error', e.data);
			};

			ws.onclose = function (e) {
				output.innerHTML += logStr('Disconnected', e.code + ' - ' + e.type);
			};

		}());
	</script>
</body>
</html>